<template>
  <div class="todoFooter" v-show="total">
      <label>
          <!-- <input style=" margin-left: 10pt;" type="checkbox" 
            :checked="isAll" 
            @click="checkAll"
          > -->
          <input style=" margin-left: 10pt;" type="checkbox" 
            v-model="isAll"
          >
      </label>
      <span>
          <span>已完成{{doneTotal}}</span>全部{{total}}
      </span>
      <button class="btn btn-danger" style="float: right;" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
    name:'MyFooter',
    props:['todos','checkAllTodo','clearAllTodo'],
    /* 计算属性 */
    computed:{
        total(){
            return this.todos.length
        },
        doneTotal(){

            //计算done为真的
            return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
        },
        isAll:{
            get(){
               return this.total === this.doneTotal && this.total>0
            },
            set(value){
                this.checkAllTodo(value)
            }
        
        }
    },
    methods:{
        // checkAll(e){
        //     console.log(e.target.checked);
        //     this.checkAllTodo(e.target.checked)
        // }
        clearAll(){
            this.clearAllTodo()
        }
    }
}
</script>

<style scoped>
    .todoFooter{
        margin: 0 auto;
        margin-top: 20px;
        width: 30%;
    }
    span {
        margin-left: 8px;
    }
</style>